<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>产品服务验收</title>
	<link rel="stylesheet" href="{S_URL}/public/css/Global.css" />
    <script type="text/javascript" src="{S_URL}/public/js/responsive.js" ></script>
	    <style>
	    	body { background: #f6f6f6;}
	    	.question {padding: 0.02rem; 0}
	    	.question li {padding-left:0.12rem;}
	    	.question li p {color:#303030;font-size: 0.12rem;}
	    	.question li span {display: block;overflow: hidden;padding-top: 0.1rem;}
	    	.question li span b {float: left;width:50%;padding-left:0.32rem;box-sizing:border-box;background: url({S_URL}/public/img/acceptance/icon_false.png) no-repeat left center / 0.18rem 0.18rem;color:#303030;font-size: 0.12rem;margin-bottom: 0.1rem;}
	    	.question li span b.curr {background: url({S_URL}/public/img/acceptance/icon_true.png) no-repeat left center / 0.18rem 0.18rem;}
	    	.question li span textarea {height: 0.8rem;background: none;resize: none;width: 100%;border: none;font-size: 0.12rem;}
	    	.worker_list {margin-top: 0.14rem;overflow: hidden;}
	    	.worker_left {overflow: hidden;background: #ffc107;height: 0.48rem;padding: 0.2rem 0.12rem;}
	    	.worker_left img {float: left;width: 0.48rem;height: 0.48rem;}
	    	.worker_left span {float: left;padding-left: 0.1rem;}
	    	.worker_left span em {display: block;color:#000;font-size: 0.14rem;padding-bottom: 0.08rem;}
	    	.worker_left span b {display: block;color:#000;font-size: 0.12rem;}
	    	.star{padding: 0.15rem 0 0 0.15rem;border-bottom: #e0e0e0 solid 1px;}
	    	.star p {margin-bottom: 0.2rem;}
	    	.star p i {display: inline-block;color:#191919;font-size: 0.13rem;}
	    	.star p span {margin-left: 0.8rem;}
	    	.star p span b {display: inline-block;width: 0.16rem;height: 0.16rem;background: url({S_URL}/public/img/acceptance/icon_star1.png) no-repeat center / cover;margin: 0 0.02rem;}
	    	.star p span b.curr {background: url({S_URL}/public/img/acceptance/icon_star2.png) no-repeat center / cover;}
	    	.assess {padding: 0.1rem 0.15rem;}
	    	.assess h3 {padding-bottom: 0.04rem;}
	    	.assess h3 span {display: inline-block;width: 0.62rem;height: 0.28rem;margin-right: 0.4rem;background: url({S_URL}/public/img/acceptance/icon_good1.png) no-repeat center /0.62rem 0.28rem;}
	    	.assess h3 em {display: inline-block;width: 0.62rem;height: 0.28rem;margin-right: 0.4rem;background: url({S_URL}/public/img/acceptance/icon_middle1.png) no-repeat center /0.62rem 0.28rem;}
	    	.assess h3 b {display: inline-block;width: 0.62rem;height: 0.28rem;margin-right: 0.4rem;background: url({S_URL}/public/img/acceptance/icon_bad1.png) no-repeat center /0.62rem 0.28rem;margin: 0;}
	    	.assess h3 span.curr {background: url({S_URL}/public/img/acceptance/icon_good2.png) no-repeat center / 0.62rem 0.28rem;}
	    	.assess h3 em.curr {background: url({S_URL}/public/img/acceptance/icon_middle2.png) no-repeat center / 0.62rem 0.28rem;}
	    	.assess h3 b.curr {background: url({S_URL}/public/img/acceptance/icon_bad2.png) no-repeat center / 0.62rem 0.28rem;}
	    	.assess p textarea {height: 1rem;border: none;background: none;resize: none;font-size: 0.12rem;}
	    	.space {height: 0.42rem;}
	    	footer {height:0.42rem;line-height:0.42rem;position: fixed;left:0;bottom: 0;right: 0;background: #ffc107;text-align: center;}
	    	footer a {display: block;color:#fff;font-size: 0.14rem;}
	    </style>
	</head>
	<body>
		<ul class="question">
			<li>
				<p>1.服务人员是否穿戴以下物品(工作服、工牌、鞋套)？</p>
				<span>
					<b data-id="one" data-a="是">是</b>
					<b class="curr1" data-id="one" data-a="否">否</b>
				</span>
			</li>
			<li>
				<p>2.货品数量、型号无误，安装完成后抽屉门板抽拉顺畅？</p>
				<span>
					<b data-id="two" data-a="是">是</b>
					<b class="curr1" data-id="two" data-a="否">否</b>
				</span>
			</li>
			<li>
				<p>3.是否提前预约送货时间并且准确到达？</p>
				<span>
					<b data-id="three" data-a="是">是</b>
					<b class="curr1" data-id="three" data-a="否">否</b>
				</span>
			</li>
			<li>
				<p>4.安装过程中是否损伤地板、墙面或者家里其他物品？</p>
				<span>
					<b data-id="four" data-a="是">是</b>
					<b class="curr1" data-id="four" data-a="否">否</b>
				</span>
			</li>
			<li>
				<p>5.总体上,您对我们的服务满意吗？</p>
				<span>
					<b data-id="five" data-a="非常满意">非常满意</b>
					<b data-id="five" data-a="满意">满意</b>
					<b data-id="five" data-a="一般">一般</b>
					<b data-id="five" data-a="不满意">不满意</b>
				</span>
			</li>
			<li>
				<p>6.评价与建议(售后问题)</p>
				<span>
					<textarea placeholder="请输入您的评价" id="val1"></textarea>
				</span>
			</li>
		</ul>
		<!--师傅列表-->
		<div class="worker_list">
			<div class="worker_left">
				<img src="{S_URL}/public/img/acceptance/icon_user.png">
				<span>
					<em>$baseinfor['name']&nbsp;&nbsp;$baseinfor['phone']</em>
					<b>送达时间：$baseinfor['time']</b>
				</span>
			</div>
			<!--星级star-->
			<div class="star">
				<p data-id="driver">
					<i>司机评分</i>
					<span>
						<b></b>
						<b></b>
						<b></b>
						<b></b>
						<b></b>
					</span>
				</p>
				<p data-id="speed">
					<i>配送速度</i>
					<span>
						<b></b>
						<b></b>
						<b></b>
						<b></b>
						<b></b>
					</span>
				</p>
				<p data-id="service">
					<i>服务品质</i>
					<span>
						<b></b>
						<b></b>
						<b></b>
						<b></b>
						<b></b>
					</span>
				</p>
			</div>
			<!--评价-->
			<div class="assess" >
				<h3>
					<span class="assessBtn"></span>
					<em class="assessBtn"></em>
					<b class="assessBtn"></b>
				</h3>
				<p>
					<textarea placeholder="请输入您的评价" id="val2"></textarea>
				</p>
			</div>
		</div>
		<div class="space"></div>
		<!--提交按钮-->
		<footer>
			<a href="javascript:void(0)" onclick="save()">提交</a>
		</footer>
		<script type="text/javascript" src="{S_URL}/public/js/jquery-2.2.4.min.js" ></script>
		<script>
			//评价
			$(".question li span b").on("click",function(){
				$(this).addClass("curr").siblings("b").removeClass("curr");
			})
			$(".star p span b").on("click",function(){
				$(this).parent("span").children("b").removeClass("curr");
				var index = $(this).index()+1;
				$(this).parents("p").attr("data-star",index);
				$(this).parent("span").children("b:lt("+index+")").addClass("curr");
			})
			//好中差评
			$(".assessBtn").on("click",function(){
				$(this).addClass("curr").siblings(".assessBtn").removeClass("curr");
				var index = $(this).index()+1;
				$(this).parents(".assess").attr("data-assess",index)
			})
		   function save(){
		      //获取前五道题的答案
		      var qu=new Array();
		      $('.curr').each(function(){
		           var arr=new Object();
		           arr.num=$(this).attr("data-id");//题目号
		           arr.answer=$(this).attr("data-a");
		           if(arr.num != '' && arr.answer !='' && typeof(arr.num) !='undefined' && typeof(arr.answer) !='undefined'){
		                 qu.push(arr);
		           }
		      });
		      //console.log(qu);
		      //第六题
		      if($("#val1").val() != ''){
		           var arr=new Object();
		           arr.num='six';//题目号
		           arr.answer=$("#val1").val();
		           qu.push(arr);
		      }
		      //司机评分,配送速度评分,服务评分
		      $(".star p").each(function(){
		           var arr=new Object();
		           arr.num=$(this).attr('data-id');
		           arr.answer=$(this).attr('data-star');
		            if(arr.num != '' && arr.answer !='' && typeof(arr.answer) != 'undefined'){
		                 qu.push(arr);
		           }
		      })
		      var commentrand=$(".assess").attr("data-assess");//本次服务级别
		      if(commentrand != '' && typeof(commentrand) != 'undefined' ){
		           var arr=new Object();
		           arr.num='commentrand';
		           arr.answer=commentrand;
		           qu.push(arr);
		      }
		      var content=$("#val2").val();//本次服务评价
		      if(content != ''){
		           var arr=new Object();
		           arr.num='content';
		           arr.answer=content;
		           qu.push(arr);
		      }
		    /*  if(qu.length < 1 ){
		         alert('请对本次服务做出评价后，再进行提交');
		         return false;
		       }*/
		       if(qu.length < 11){
		           alert('请对本次所有服务进行评价后，再进行提交');
		         return false;
		       }
		   
		      $.ajax({
		          url:'/public/menu/acceptance/req/save',
		          type:'post',
		          dataType:'json',
		          data:{'data':qu,'number':"$baseinfor['number']",'car':"$baseinfor['carnumber']"},
		          success:function(data){
		              if(data['result'] == 'fail'){
		                  alert(data['msg']);
		              }else{
		                  location.replace("/public/menu/acceptance/req/result/id/$baseinfor['number']");
		              }
		          }
		      })
		   }
	
		   
		</script>
	</body>
</html>
